import './public-path';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

type AnyObject = {
  [key: string]: any;
};

const { name } = require('../package.json');
const basename = window.__POWERED_BY_QIANKUN__ ? `/${name}` : "/";

let root: any = null;

function render({container}: AnyObject = {}) {
  root = ReactDOM.createRoot(
    container
      ? container.querySelector('#app')
      : document.getElementById('app') as HTMLElement
  );
  root.render(
    <BrowserRouter basename={basename}>
      <App />
    </BrowserRouter>
  );
}

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('react-webpack 子应用 bootstrap')
}

export async function mount(props: AnyObject = {}) {
  console.log('react-webpack 子应用 mount', props)
  render(props);
}

export async function unmount(props: AnyObject = {}) {
  console.log('react-webpack 子应用 unmount', props)
  const { container } = props;
  // 18
  root.unmount(
    container
      ? container.querySelector('#app')
      : document.getElementById('app') as HTMLElement
  )
  // 16
  // ReactDOM.unmountComponentAtNode
}
